<template>
  <div class="div_padding">
    <insert ref="insert" v-bind:menu_id="menu_id"  @reloadTable="reloadTable"></insert>
    <edit ref="edit"  @reloadTable="reloadTable"></edit>
    <el-divider content-position="left"><span style="font-size: 14px">当前来自菜单：</span><el-tag disabled size="medium">{{ title }}</el-tag>
      <el-button style="margin-left: 10px;" v-permission="'Create'" type="success" size="mini" icon="el-icon-plus" @click="onSubmit">添加</el-button>
      <el-button style="float: right;" size="mini" icon="el-icon-refresh-right" circle @click="reloadTable"></el-button>
    </el-divider>
  <el-table
    :data="tableData"
    size="small"
    v-loading="loading"
    empty-text="查询结果为空!"
    element-loading-text="数据加载中..."
    element-loading-spinner="el-icon-loading"
    style="width: 100%;"
    row-key="id"
    border>
    <el-table-column
      label="序号"
      type="index"
      width="100">
    </el-table-column>
    <el-table-column
      prop="name"
      label="名称"
      width="280"
      align="center"
    >
      <template slot-scope="scope">
        <el-tag :type="buttonTypeList(scope.row.name)" plain disabled>{{ scope.row.name }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
      prop="value"
      label="权限值"
      width="180"
      align="center"
    >
    </el-table-column>
    <el-table-column
      prop="method"
      label="请求方式"
      :formatter="methodFormatter"
      width="280">
    </el-table-column>
    <el-table-column
      prop="api"
      label="接口地址">
    </el-table-column>
    <el-table-column
      label="操作" align="center" width="300" prop="parent" fixed="right">
      <template slot-scope="scope">
        <div>
          <el-button type="primary" v-permission="'Update'" size="mini" @click="onEdit(scope.$index,scope.row)" icon="el-icon-edit" plain>编辑</el-button>
          <el-button type="danger" v-permission="'Delete'" size="mini" icon="el-icon-delete" plain @click="onDelete(scope.row)">删除</el-button>
        </div>
      </template>
    </el-table-column>
  </el-table>
  </div>
</template>

<script>
  import { getMenuButtonData,delMenuButtonData } from '@/api/menuButton'
  import { successMsg } from '@/utils/tools'
  import insert from './insert'
  import edit from './edit'
  export default {
    name:'MenuButton',
    components:{
      insert,
      edit
    },
    created() {
      this.fetchData()
    },
    data() {
      return {
        title:this.$route.query.title,
        menu_id:this.$route.query.id,
        loading:false,
        tableData: [],
        buttonTypeList:function(val) {
          if (val=='新增'){
            return 'success'
          }else if(val=='编辑'){
            return 'primary'
          }else if(val=='删除'){
            return 'danger'
          }else if(val=='查询'){
            return 'info'
          }else if(val=='单例'){
            return 'info'
          }else if(val=='保存'){
            return 'warning'
          }
        },
        methodFormatter(row) {
        if(row.method==0){
          return 'get'
        }else if(row.method==1){
          return 'post'
        }else if(row.method==2){
          return 'put'
        }else if(row.method==3){
          return 'delete'
        }
        }
      }
    },
    methods:{
      fetchData(){
        getMenuButtonData({menu:this.$route.query.id}).then(res=>{
          this.tableData = res.data.data
          this.loading=false
        })
      },
      reloadTable(){
        this.loading=true
        this.fetchData()
      },
      onEdit(index,row){
        console.log(row)
        this.$refs.edit.dialogFormVisible = true
        // this.$refs.edit.formInline = Object.assign({}, row);//formInline，将row的数据复制到editForm对象中，实现的是浅拷贝
        this.$refs.edit.formInline.id=row.id
        this.$refs.edit.formInline.menu=this.$route.query.id
        this.$refs.edit.formInline.name=row.name
        this.$refs.edit.formInline.value=row.value
        if(row.method==0&&row.value=='Search'){
          this.$refs.edit.formInline.method=0
        }else{
          this.$refs.edit.formInline.method=row.method
        }
        this.$refs.edit.formInline.api=row.api
      },
      onDelete(row){
        this.$confirm('此操作将真实删除，谨慎操作!是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
          delMenuButtonData(row.id).then(res=>{
            if(res.code===2000) {
              successMsg(res.msg)
              this.reloadTable()
            }
          }).catch(()=>{
            errorMsg('删除失败')
          })
        }).catch(()=>{
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
      },
      onSubmit(){
        this.$refs.insert.dialogFormVisible = true
      }
    }
  }
</script>
<style>
  .div_padding {
    padding: 10px 10px
  }
</style>
